本文整理了一些有关跨域的基础知识和细节问题。
什么是跨域
个人一句话解释：如果 url A 与 url B 不同源，那么页面A不能获取页面B的资源。这里有两个关键词：url 和 同源，浏览器的同源策略就是针对两个url，它们满足以下三个条件，才是同源：
- 协议相同
- 域名相同
- 端口相同
https://www.baidu.com/
这里面有两个细节需要提及，域名是包括//到/的所有部分www.baidu.com；没有指定端口号默认是:80端口。
如果一个页面中的JS可以任意发起http跨域获取其他页面上的资源，这是一件很可怕的事，举个例子：
- 张三访问了某银行网站
abank.com，服务器端验证后会在响应头中加入Set-Cookie字段，然后下次张三再发起请求，浏览器会自动将cookie附加在HTTP请求的首部字段Cookie中，服务器端就知道张三已经登录过了。 - 张三接着访问了危险页面
danger.com，这个页面中写了一些Ajax，它发起请求访问abank.com，这一行为用户不能察觉，如果可以跨域发起请求，那么浏览器同样会自动将cookie附加在HTTP请求的首部字段Cookie中，这样这个危险危险网站就登陆了张三的银行账户。
所以用同源策略来限制跨域是必须的。
这里我思考了一个问题，在浏览器地址栏里输入url为什么没有出现跨域问题？
要明确，同源策略是浏览器的行为，在地址栏中输入url是用户主观行为，所以浏览器是不判为跨域的。那么同源限制的对象其实是页面中发起http请求的js。那同源限制的行为有哪些呢？有以下三种：
- Cookie、LocalStorage 和 IndexDB 无法读取。
- DOM 无法获得。
- AJAX 请求不能获取到响应。
注意第三点：跨域的AJAX请求其实是可以发送出去的，但是浏览器拦截了响应，使其不能获取到数据。以上三点其实都是在限制js脚本跨域获取不同域页面上的数据。有个特例是form表单，form表单提交数据是不受跨域限制的，因为提交表单数据是没有返回值的，没有获取数据的操作，浏览器认为这样的操作是无害的，这也是csrf攻击能够实施的原因。
接下来说说规避跨域限制的几种方式
针对AJAX的跨域
JSONP
JSONP利用的的是：<script>、<img>这些标签下载url中的资源是没有跨域限制的。
它的基本做法是：网页添加一个<script>元素，向服务器请求 JSON 数据，这种做法不受同源政策限制；服务器收到请求后，将JSON放在一个指定名字的回调函数里传回来。所以，顾名思义，JSONP = JSON with padding：填充式 JSON，其实就是服务器端把 JSON 作为回调函数的参数，返回这个回调函数。
<script type="text/javascript">
function foo(data) {
console.log('Your public IP address is: ' + data.ip);
};
<script>
<script type="text/javascript" src="http://example.com/ip?callback=foo"></script>上面的script标签向服务器example.com发出请求，该请求有一个查询字符串callback参数，用来指定回调函数的名字；服务器发现请求中有callback参数，就会将JSON作为指定回调函数的参数，回调函数作为脚本返回；脚本返回后，会直接作为代码运行，这时，只要浏览器定义了foo函数，该函数就会立即调用。
JSONP的缺点在于只能发GET请求。
CORS
CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
阮一峰老师关于CORS的文章非常细致，跨域资源共享 CORS 详解，这里仅仅梳理下提纲备查。
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
只要同时满足以下两大条件，就属于简单请求。
请求方法是以下三种方法之一：
- HEAD
- GET
- POST
HTTP的头信息不超出以下几种字段：
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同时满足上面两个条件，就属于非简单请求。
简单请求
简单请求的CORS分为以下几步：
- 浏览器发现AJAX请求跨源，在请求头中添加Origin字段，它的值是http请求的源url；
- 服务器根据Origin的值决定是否同意这次请求；
如果Origin指定的域名在服务器许可范围内，则会在报头中添加以下三个字段：
Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求.Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器，另一方面，开发者必须在AJAX请求中打开withCredentials属性。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段。
- 如果如果
Origin指定的域名不在服务器许可范围内，响应头中没有Access-Control-Allow-Origin，浏览器就会抛出错误，中断这个http请求。
非简单请求
非简单请求的CORS分为以下几步：
浏览器在正式请求之前，先发送一个预检请求，预检请求的请求方法是
OPTIONS，请求头中带以下两个字段：Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法Access-Control-Request-Headers
可选，该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段
如果服务器端预检不通过，浏览器报错；如果通过，返回的响应头中包含以下几个字段：
Access-Control-Allow-Origin
一定包含Access-Control-Allow-Methods
一定包含，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。Access-Control-Allow-Credentials
可选Access-Control-Max-Age
可选，用来指定本次预检请求的有效期，单位为秒，未过期的话不用再发送预检请求。
- 一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个
Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。
WebSocket
WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
针对Cookie
Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。但是，两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie。
举例来说，A网页是http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，那么只要在两个网页的脚本中设置的document.domain='example.com'，两个网页就可以共享Cookie。
针对iframe
如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。对于完全不同源的网站，目前有三种方法，可以解决跨域窗口的通信问题:
- 片段识别符（fragment identifier）
- window.name
- 跨文档通信API（Cross-document messaging），HTML5中的
window.postMessage
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。